import { View } from '@tarojs/components';
import React, { Component } from 'react';
import { AtButton, AtInput, AtMessage } from 'taro-ui';
import { connect } from 'react-redux'
import Taro from '@tarojs/taro'
import './Distribution.scss'
import { setCabinetId, setLocationVisible } from '../../actions/global';
import { findCabinets, getCabinets } from '../../actions/cabinets';
import { locationUpdate } from '../../actions/location';
import { loginWXMP, refershToken } from '../../actions/login';
import { getToken, getUser, setUser } from '../../actions/user';
import { WXRequest } from '../../utils/WXRequest';
import { URLADDINVITER } from '../../constants/SystemConstants';

class Distribution extends Component {

  state = {
    distributioncode: '',
    flag: false
  }

  componentDidMount () {

  }

  onCodeChange (value) {
    this.setState({
      distributioncode: value
    })
  }

  onCodeSubmit () {
    if (this.state.flag) return
    this.setState({
      flag: true
    }, () => {
      if (this.state.distributioncode.trim() !== '') {
        WXRequest(URLADDINVITER, 'POST', { inviterPhone: this.state.distributioncode })
        Taro.atMessage({
          type: 'success',
          message: '提交成功'
        })
        setTimeout(() => {
          this.setState({
            flag: false
          }, () => {
            Taro.navigateTo({
              url: '/pages/index/index'
            })
          })
        }, 2000)
      }
    })
  }

  render () {
    return (
      <View>
        <AtMessage />
        <View>
          <AtInput
            placeholder='填写邀请码'
            className='code-input'
            name='distributioncode'
            value={this.state.distributioncode}
            onChange={this.onCodeChange.bind(this)}
          />
        </View>
        <View>
          <AtButton className='submit-button' type='primary' onClick={this.onCodeSubmit.bind(this)}>
            提交
          </AtButton>
        </View>
      </View>
    )
  }
}

// 将 reducer 中的状态插入到组件的 props 中
// 下面是单个reducer的时候，多个的时候需要选传入哪个reducer
// const { test, count } = state
const mapStateToProps = (state) => ({
  user: state.user,
  login: state.login,
  cabinets: state.cabinets.cabinets,
  detailLogin: state.cabinets.detailLogin,
  cabinet: state.cabinets.cabinet,
  location: state.global.location
})

// 将 对应action 插入到组件的 props 中
const mapDispatchToProps = (dispatch) => ({
  getUser () {
    dispatch(getUser())
  },
  getToken () {
    dispatch(getToken())
  },
  setUser (user) {
    dispatch(setUser(user))
  },
  refershToken (token) {
    dispatch(refershToken(token))
  },
  toLogin () {
    dispatch(loginWXMP())
  },
  updateLocation() {
    dispatch(locationUpdate())
  },
  updateCabinets () {
    dispatch(findCabinets())
  },
  getCabinets (id) {
    dispatch(getCabinets(id))
  },
  setCabinetId (id) {
    dispatch(setCabinetId(id))
  },
  setLocationVisible (visible, type) {
    dispatch(setLocationVisible(visible, type))
  }
})

// 使用 connect 高阶组件对 Counter 进行包裹
export default connect(mapStateToProps, mapDispatchToProps)(Distribution)